<template>
  <div>
    <el-form
      ref="addForm"
      :model="data"
      :rules="rules"
      label-width="140px"
    >
      <el-form-item :label="$t('userList.userId')" prop="userId">
        <el-input v-model="data.userId" />
      </el-form-item>
      <el-form-item :label="$t('userList.userName')" prop="userName">
        <el-input v-model="data.userName" />
      </el-form-item>
      <el-form-item :label="$t('userList.realName')" prop="realName">
        <el-input v-model="data.realName" />
      </el-form-item>
      <el-form-item :label="$t('userList.email')" prop="email">
        <el-input v-model="data.email" />
      </el-form-item>
      <el-form-item :label="$t('userList.phone')" prop="phone">
        <el-input v-model="data.phone" />
      </el-form-item>
      <el-form-item :label="$t('userList.positionName')" prop="positionName">
        <el-input v-model="data.positionName" />
      </el-form-item>
      <el-form-item :label="$t('userList.gender')" prop="gender">
        <el-input v-model="data.gender" />
      </el-form-item>
      <el-form-item :label="$t('userList.tenantId')" prop="tenantId">
        <el-input v-model="data.tenantId" disabled />
      </el-form-item>
      <el-form-item :label="$t('menuList.menuType')" prop="menuType">
        <el-radio v-model="data.menuType" label="menu">菜单</el-radio>
        <el-radio v-model="data.menuType" label="component">组件</el-radio>
      </el-form-item>
      <el-form-item :label="$t('menuList.menuUrl')" prop="menuUrl">
        <el-input v-model="data.menuUrl" />
      </el-form-item>
      <el-form-item :label="$t('menuList.component')" prop="component">
        <el-input v-model="data.component" />
      </el-form-item>
      <el-form-item :label="$t('menuList.redirect')" prop="redirect">
        <el-input v-model="data.redirect" />
      </el-form-item>
      <el-form-item :label="$t('menuList.menuIcon')" prop="menuIcon">
        <el-input v-model="data.menuIcon" />
      </el-form-item>
      <el-form-item :label="$t('menuList.parentId')" prop="parentId">
        <el-select v-model="data.parentId" :placeholder="$t('menuList.placeSelect')" clearable>
          <el-option value="-1">{{ $t('menuList.placeSelect') }}</el-option>
          <el-option
            v-for="(item, index) in menuList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('menuList.meta')">
        <el-input v-model="data.meta" type="textarea" :autosize="{minRows: 4, maxRows:10}" placeholder="如果为流程列表，则格式为 {'processKey':'pig_test1'}" />
      </el-form-item>
      <el-form-item :label="$t('menuList.sort')" prop="sort">
        <el-input-number v-model="data.sort" />
      </el-form-item>
      <el-form-item :label="$t('menuList.validState')" prop="validState">
        <el-switch
          v-model="data.validState"
          :active-value="1"
          :inactive-value="0"
          :active-text="$t('menuList.status1')"
          :inactive-text="$t('menuList.status0')"
        />
      </el-form-item>

      <el-form-item :label="$t('menuList.remarks')">
        <el-input v-model="data.remarks" type="textarea" :autosize="{minRows: 2, maxRows:4}" />
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" @click="onSubmit"> {{ $t('table.confirm') }}</el-button>
        <el-button @click="onCancel"> {{ $t('table.cancel') }}</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>

import { insertMenu, getList } from '@/api/menu'
// import deepClone from 'clone-deep'
import store from '@/store'

export default {
  name: 'AddForm',

  props: {

  },
  data() {
    return {
      data: {
        menuId: null,
        menuName: null,
        menuCode: null,
        remark: null,
        tenantId: store.getters.tenantId,
        validState: 1,
        menuIcon: null,
        menuUrl: null,
        menuType: 'menu',
        meta: '',
        parentId: 0,
        component: null,
        sort: 1,
        redirect: null,
        remarks: ''
      },
      menuTypeList: [
        { label: '菜单', value: 'menu' },
        { label: '组件', value: 'component' }
      ],
      menuList: [],
      loading: false,
      rules: {
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { min: 1, message: '长度最少为1个字符', trigger: 'blur' }
        ],
        menuCode: [
          { required: true, message: '请输入菜单编码', trigger: 'blur' },
          { min: 1, message: '长度最少为1个字符', trigger: 'blur' }
        ],
        tenantId: [
          { required: true, message: '请输入租户编号', trigger: 'blur' },
          { min: 1, message: '长度最少为1个字符', trigger: 'blur' }
        ],
        menuType: [
          { required: true, message: '请至少选择一个菜单类型', trigger: 'change' }
        ],
        menuUrl: [
          { required: true, message: '请输入菜单路径', trigger: 'blur' },
          { min: 1, message: '长度最少为1个字符', trigger: 'blur' }
        ]

      }
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {

  },
  created() {
    this.getList()
  },

  methods: {

    onSubmit() {
      const _this = this
      _this.loading = true
      _this.$refs['addForm'].validate((valid) => {
        if (valid) {
          const postData = _this.data
          insertMenu(postData).then(response => {
            _this.$message.success('保存成功!')
            _this.$nextTick(() => {
              _this.loading = false
            })
            _this.$emit('close')
            _this.$emit('queryList')
          })
        } else {
          _this.$nextTick(() => {
            _this.loading = false
          })
          return
        }
      })
      this.$nextTick(() => {
        _this.loading = false
      })
    },
    onCancel() {
      const _this = this

      _this.$emit('close')
    },
    getList() {
      const postData = {
        tenantId: store.getters.tenantId,
        pageIndex: 1,
        pageSize: 10000
      }
      getList(postData).then(response => {
        const list = [{ label: '根目录', value: 0 }]
        for (const key in response.data.list) {
          list.push({ label: response.data.list[key].menuName, value: response.data.list[key].menuId })
        }
        this.menuList = list
      })
    }
  }
}
</script>

<style scoped>
.el-form-item label:after {
        content: "";
        display: inline-block;
        width: 100%;
    }

    .el-form-item__label {
        text-align: justify;
        height: 50px;
    }

    .el-form-item.is-required .el-form-item__label:before {
        content: none !important;
    }
.el-drawer:focus {
    outline: none;
}

</style>
